<template>
	<div class="goods-info-form">
		<div class="mb-2 flex items-center justify-between">
			<div class="flex items-center gap-2">
				<el-button type="primary" @click="handleAddGoods">
					<el-icon class="mr-1"><Plus /></el-icon>添加
				</el-button>
				<el-button @click="handleAddNewProduct">
					<el-icon class="mr-1"><CirclePlus /></el-icon>新增货品
				</el-button>
			</div>
		</div>
		<el-table :data="goodsList" border>
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column label="货物名称" min-width="150">
				<template #default="scope">
					<el-select
						v-model="scope.row.name"
						placeholder="请选择货物"
						clearable
						class="!w-full"
					>
						<el-option
							v-for="option in goodsOptions"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						/>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="数量" width="150">
				<template #default="scope">
					<el-input-number
						v-model="scope.row.quantity"
						:min="0"
						class="!w-full"
						@change="handleDataChange"
					/>
				</template>
			</el-table-column>
			<el-table-column label="单位" width="150">
				<template #default="scope">
					<el-select
						v-model="scope.row.unit"
						placeholder="请选择单位"
						clearable
						class="!w-full"
						@change="handleDataChange"
					>
						<el-option label="吨" value="ton" />
						<el-option label="件" value="piece" />
						<el-option label="方" value="cube" />
						<el-option label="箱" value="box" />
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="需求车次" width="150">
				<template #default="scope">
					<el-input-number
						v-model="scope.row.requiredTimes"
						:min="1"
						:max="99"
						class="!w-full"
						@change="handleDataChange"
					/>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="80" align="center">
				<template #default="scope">
					<el-button
						type="danger"
						link
						@click="handleDeleteGoods(scope.$index)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增货品弹框 -->
		<AddCargo ref="addCargoRef" @success="handleAddProductSuccess" />
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Plus, CirclePlus } from '@element-plus/icons-vue';
import AddCargo from '/@/views/tscompany/CargoMgmt/components/addCargo.vue';

// 货物选项列表
const goodsOptions = [
	{ label: '钢材', value: 'steel' },
	{ label: '木材', value: 'wood' },
	{ label: '煤炭', value: 'coal' },
	{ label: '水泥', value: 'cement' },
	{ label: '砂石', value: 'sand' },
	{ label: '化工品', value: 'chemical' },
	{ label: '其他', value: 'other' },
];

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
});

const emit = defineEmits(['update:modelValue', 'change']);

const goodsList = ref([]);

// 新增货品弹框引用
const addCargoRef = ref();

// 初始化数据
const initData = () => {
	if (props.modelValue && props.modelValue.length > 0) {
		goodsList.value = props.modelValue.map((item) => ({
			name: item.name || '',
			quantity: item.quantity || 0,
			unit: item.unit || '',
			requiredTimes: item.requiredTimes || 1,
		}));
	} else {
		goodsList.value = [];
	}
};

// 监听数据变化
watch(
	() => props.modelValue,
	() => {
		initData();
	},
	{ immediate: true, deep: true },
);

// 数据变化处理
const handleDataChange = () => {
	emit('update:modelValue', goodsList.value);
	emit('change', goodsList.value);
};

// 添加货物
const handleAddGoods = () => {
	goodsList.value.push({
		name: '',
		quantity: 0,
		unit: '',
		requiredTimes: 1,
	});
	handleDataChange();
};

// 删除货物
const handleDeleteGoods = (index) => {
	goodsList.value.splice(index, 1);
	handleDataChange();
};

// 打开新增货品弹框
const handleAddNewProduct = () => {
	addCargoRef.value?.open();
};

// 新增货品成功
const handleAddProductSuccess = () => {
	// TODO: 刷新货品列表
	// 不需要手动关闭弹框，组件内部会处理
};
</script>

<style lang="scss" scoped>
.goods-info-form {
	:deep(.el-table) {
		border: 1px solid var(--el-border-color-lighter);
		border-radius: 4px;

		.el-table__header {
			th.el-table__cell {
				background-color: var(--el-fill-color-light);
				color: var(--el-text-color-regular);
				font-weight: 500;
			}
		}

		.el-table__body {
			td.el-table__cell {
				padding: 8px;
			}
		}

		.el-input-number.is-without-controls {
			.el-input__wrapper {
				padding-right: 11px;
			}
		}
	}
}
</style>
